<template>
    <div id="about">
        <el-row>
            <el-col :span="16" :offset="4">
                <h3 class="about-title">公司介绍</h3>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <!-- <p class="about-text">四川智泽元丰信息技术有限公司隶属于香港智泽产业集团，智泽 集团创立于1985年，是一家拥有雄厚资本实力和数十年投资经验的港 资背景公司，在实业投资和资本市场领域拥有敏锐的市场洞察力和丰 富的投资经验，投资涉及如基础设施建设、绿色节能环保等诸多领域。</p>
                        <p class="about-text">正因公司具备高度前瞻性，集团公司强烈看好环保领域未来市场 的广阔发展前景，未雨绸缪，开始为集团未来整体上市做好充分准备， 再次做出重大部署，组建成立智泽元丰公司，强力切入金融服务领域， 为未来进入资本市场打下坚实基础。</p>
                        <p class="about-text">智泽元丰聘请长期从事银行、保险、基金、证券、期货等金融行 业的精英人士作为公司的核心中坚力量，精心打造出一支具有低调高 效，横跨股、期、汇等各大领域，并拥有丰富稳健的投资管理经验的 金融服务团队，在风险控制和金融套利等方面具备优秀的实战能力， 倾力打造卓越的金融服务机构，做好战略布局。</p> -->
                        <p class="about-text" v-html="formatContent(companyIntro)"></p>
                    </el-col>
                    <el-col :span="12" class="img-contain">
                        <img src="../assets/about.jpg" alt="" class="about-img">
                    </el-col>
                </el-row>
                <h3 class="about-title">公司风采</h3>
                <el-row class="scroll-content">
                    <vue-seamless-scroll :data="companyView" :class-option="optionLeft" class="seamless-warp2">
                        <ul class="item">
                            <li v-for="(item, index) in companyView" :key="index">
                                <img :src="UPLOAD_URL + item" alt="" class="performance-img">
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="showImage" width="600px" @close="closeDialog" class="dialog" top="50px">
            <img :src="bigImageUrl" alt="" class="big-img">
        </el-dialog>
    </div>
</template>
<script>
import { getConfig } from '@/api/api'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    data: function () {
        return {
            companyView: [],
            showImage: false,
            bigImageUrl: '',
            companyIntro: ''
        }
    },
    components: {
        vueSeamlessScroll
    },
    computed: {
        optionLeft() {
            return {
                step: 1,
                direction: 2,
                limitMoveNum: 5
            }
        }
    },
    created: function() {
        getConfig('companyView,companyIntro').then(res => {
            this.companyView = JSON.parse(res.companyView).slice(0, 13)
            this.companyIntro = res.companyIntro;
        })
    },
    mounted: function() {
        var _this = this;
        function showImg(src) {
            _this.showBigImage(src)
        }
        // 给父层元素绑定事件
        document.querySelector('.scroll-content').addEventListener('click', function(e) {
            // 兼容性处理
            var event = e || window.event;
            var target = event.target || event.srcElement;
            // 判断是否匹配目标元素
            if (target.nodeName.toLocaleLowerCase() === 'img') {
                var src = target.getAttribute('src');
                showImg(src)
            }
        });
    },
    methods: {
        showBigImage: function(url) {
            this.bigImageUrl = url;
            this.showImage = true;
        },
        closeDialog: function() {
            this.showImage = false;
            this.bigImageUrl = '';
        },
        formatContent: function(val){
            if(!val){
                return;
            }
            return val.replace(/\n/g, '<br>')
        }
    }
}
</script>
<style scoped>
.about-title{
	text-align: center;
	font-size: 30px;
}
.about-text{
	/*text-indent: 2em;*/
	line-height: 2;
    margin: 0;
}
.img-contain{
	text-align: center;
}
.framework{
	margin-bottom: 40px;
}


.seamless-warp2 {
    overflow: hidden;
    width: 100%;
    /*必须要小于ul的宽度 不然显示有问题*/
    margin: 30px 0;
}

.seamless-warp2 ul.item {
    width: 2730px;
    /*宽度必设，图片张数*图片宽度：limitMoveNum*.performance-img*/
    overflow: hidden;
    zoom: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seamless-warp2 ul li {
    float: left;
    margin: 0 5px;
}

.performance-img {
    width: 200px;/*图片宽200*/
    height: 150px;
}

.big-img {
    width: 100%;
}
.about-img{
    width: 100%;
}
</style>
